react-spring结合use-gesture手势库实现交互动画

上节我们学了用 react-spring 做动画。

其实也简单，就是指定某些属性的开始值、结束值，动画的时长或者弹簧动画的一些参数，react-spring 就会实现这些属性的动画。

再就是多个元素可以设置并行、依次执行或者间隔一段时间执行的顺序。

但是很多情况下，动画不是直接触发的，而是由 drag、hover、scroll 等事件触发。

这节我们就结合事件来实现一些交互动画。

我们会用到一个手势库 @use-gesture/react

可能很多同学都没用过手势库，其实手势库里就是对 drag、hover、scroll 这些事件的封装：

直接给元素绑定事件不行么，为啥还要加一个手势库呢？

那如果我想知道移动的方向、移动的距离、移动的速率呢？

自己算这些就很麻烦，而用了手势库，这些就都有了。

新建个项目来试下：

npx create-react-app --template=typescript use-gesture-test

我们来实现这样一个案例：

拖拽的时候触发动画，通过 use-gesture 实现拖动，拿到方向、距离等信息，然后用 react-spring 做属性变化的动画。

安装这两个包：

npm install --save @react-spring/web @use-gesture/react

改下 App.tsx

import { useSprings, animated } from "@react-spring/web";

import "./App.css";

const pages = [
    "https://images.pexels.com/photos/62689/pexels-photo-62689.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/733853/pexels-photo-733853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/4016596/pexels-photo-4016596.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/351265/pexels-photo-351265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/924675/pexels-photo-924675.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
];

function Viewpager() {
    const width = window.innerWidth;

    const [props, api] = useSprings(pages.length, (i) => ({
        x: i * width,
        scale: 1,
    }));

    return (
        <div className="wrapper">
            {props.map(({ x, scale }, i) => (
                <animated.div className="page" key={i} style={{ x }}>
                    <animated.div
                        style={{ scale, backgroundImage: `url(${pages[i]})` }}
                    />
                </animated.div>
            ))}
        </div>
    );
}

export default Viewpager;

这里是多个元素并行的动画，用 useSprings。

然后改变 x 和 scale 属性。

x 的初始值是 width * i，也就是依次平铺。

所有接收动画属性的地方都要用 <animated.div> ，这里用到 x 和 scale 属性的两个 div 换成 <animated.div>

然后是 App.css：

html,
body,
#root {
    height: 100%;
    width: 100%;
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.page > div {
    touch-action: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 50px #000;
}

这里图片要充满屏幕，从 html、body、#root 到 .wrapper、.page 都要设置宽高 100%：

touch-action 设置为 none 是禁止移动端的默认 touch 处理。

不然默认会导致页面的缩放和滑动：

可以看到，渲染的结果是对的：

这里我们设置的 x，但是 react-spring 用 translate3d 来实现的，这是它内部做的性能优化。

接下来用 use-gesture 来加上手势的处理：

import { useRef } from "react";
import { useSprings, animated } from "@react-spring/web";
import { useDrag } from "@use-gesture/react";

import "./App.css";

const pages = [
    "https://images.pexels.com/photos/62689/pexels-photo-62689.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/733853/pexels-photo-733853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/4016596/pexels-photo-4016596.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/351265/pexels-photo-351265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
    "https://images.pexels.com/photos/924675/pexels-photo-924675.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
];

function Viewpager() {
    const index = useRef(0);
    const width = window.innerWidth;

    const [props, api] = useSprings(pages.length, (i) => ({
        x: i * width,
        scale: 1,
    }));

    const bind = useDrag(
        ({ active, movement: [mx], direction: [xDir], cancel }) => {}
    );

    return (
        <div className="wrapper">
            {props.map(({ x, scale }, i) => (
                <animated.div
                    className="page"
                    {...bind()}
                    key={i}
                    style={{ x }}>
                    <animated.div
                        style={{ scale, backgroundImage: `url(${pages[i]})` }}
                    />
                </animated.div>
            ))}
        </div>
    );
}

export default Viewpager;

用 useRef 保存当前的 index，初始值是 0。

用 use-gesture 也很简单，绑定啥事件就用 useXxx，比如 useDrag、useHover、useScroll 等。

或者用 useGesture 同时绑定多种事件：

手势库最大的好处是可以拿到移动的方向、速率、距离等信息。

这里我们拿到的这几个参数：

movement 是拖动距离 [x, y]

direction 是拖动方向 [x, y]，1 代表向左（向上）、-1 代表向右（向下）。

active 是当前是否在拖动。

cancel 方法可以中止事件。

拖动时的处理如下：

const bind = useDrag(
    ({ active, movement: [mx], direction: [xDir], cancel }) => {
        if (active && Math.abs(mx) > width / 2) {
            let newIndex = index.current + (xDir > 0 ? -1 : 1);

            if (newIndex < 0) {
                newIndex = 0;
            }

            if (newIndex > pages.length - 1) {
                newIndex = pages.length - 1;
            }

            index.current = newIndex;

            cancel();
        }
        api.start((i) => {
            const x = (i - index.current) * width + (active ? mx : 0);
            const scale = active ? 1 - Math.abs(mx) / width : 1;
            return { x, scale };
        });
    }
);